<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品信息</title>
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <link rel="stylesheet" href="../src/css/reset.css">
    <style>
* {
    margin: 0;
    padding: 0;
}
.con{
    margin: 0 auto;
}
#head{
    width:100%;
    height: 120px;
}
#head .con{
    width: 1427px;
    height: 120px;
    border-bottom: 1px solid #cccccc;
}
#head .logo{
    width: 252px;
    height: 120px;
    float: left;
}
.logo li{
    width: 180px;
    height: 100px;
    margin-top:10px;
    margin-left:  20px;  
}
#head li:hover{
    transform: scale(1.2)
}
img{
    width: 100%;
    height: 100%;
}
#head .dizhi{
    width: 90px;
    height: 120px;
    float: left;
    border-left: 1px solid #ccc;
    position: relative;
}
.dizhi li{
    width: 15px;
    height: 19px;
    margin-top:38px;
    margin-left:38px;
    float: left; 
    transition: all 1s;
}
#head span{
    width: 90px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 36px;
    left:0;
}
#head .chanpin{
    width: 90px;
    height: 120px;
    float: left;
    position: relative;
    border-left: 1px solid #ccc; 
}
.chanpin li{
    width: 23px;
    height: 14px;
    margin-top:38px;
    margin-left:38px;
    float: left;
    text-align: center;
    transition: all 1s;
}
#head .shouye{
    width: 90px;
    height: 120px;
    float: left;
    position: relative;
    border-left: 1px solid #ccc;
   
}
.shouye li,.cake li,.xiaochi li,.buycar li,.login li{
    width: 30px;
    height: 30px;
    margin-top:32px;
    margin-left:30px;
    float: left;
    transition: all 1s;
}
.login li{
    width: 18px;
    height: 20px;
    margin-top:40px;
    margin-left:40px;
    float: left; 
    transition: all 1s; 
}
#head .cake{
    width: 90px;
    height: 120px;
    float: left;
    position: relative;
    border-left: 1px solid #ccc;
   
}
#head .chanpin{
    width: 90px;
    height: 120px;
    float: left;
    position: relative;
    border-left: 1px solid #ccc;
   
}
#head .xiaochi{
    width: 90px;
    height: 120px;
    float: left;
    position: relative;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#head .login{
    width: 90px;
    height: 120px;
    float: right;
    position: relative;
    border-left: 1px solid #ccc;
   
}
#head .buycar{
    width: 90px;
    height: 120px;
    float: right;
    position: relative;
    border-left: 1px solid #ccc;
   
}
#head .more{
    width: 90px;
    height: 120px;
    float: right;
    position: relative;
    border-left: 1px solid #ccc;
   
}
.more li{
    width: 23px;
    height: 13px;
    margin-top:44px;
    margin-left:38px;
    float: left; 
    transition: all 1s;
}
#box {
    width: 80%;
    margin: 50px auto;
}
tr {
    height: 30px;
}

.template {
    display: none;
}

#mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, .7);
    top: 0;
    left: 0;
    display: none;
}

#popup {
    width: 400px;
    padding: 30px 10px;
    position: fixed;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    display: none;
}
#popup label {
    width: 80px;
}
#popup p {
    margin: 15px;
}
#popup input {
    border-radius: 5px;
}
    </style>
</head>

<body>
    <div id="head">
        <div class="con">
            <div class="logo">
                <li>
                    <img src="../src/images/logo.png" alt="">
                </li>

            </div>
            <div class="dizhi">
                <li>
                    <img src="../src/images/icon05.png" alt="">
                </li>
                <span>上海市</span>
            </div>
            <div class="chanpin">
                <li>
                    <img src="../src/images/icon01.png" alt="">
                </li>
                <span>所有产品</span>
            </div>
            <div class="shouye">
                <li>
                    <img src="../src/images/home-1.png" alt="">
                </li>
                <span>首页</span>
            </div>
            <div class="cake">
                <li>
                    <img src="../src/images/1.png" alt="">
                </li>
                <span>蛋糕</span>
            </div>
            <div class="xiaochi">
                <li>
                    <img src="../src/images/2.png" alt="">
                </li>
                <span>小食</span>
            </div>
            <div class="more">
                <li>
                    <img src="../src/images/icon02.png" alt="">
                </li>
                <span>更多</span>
            </div>
            <div class="buycar">
                <li>
                    <img src="../src/images/bag1.png" alt="">
                </li>
                <span>购物车</span>
            </div>
            <div class="login">
                <li>
                    <img src="../src/images/login.png" alt="">
                </li>
                <span>
                    <b>登录</b>|
                    <b>注册</b>
                </span>
            </div>
        </div>
    </div>
    <div id="box">
        <button class="btn btn-primary" id="addproduct" style="float:right;">+ 新增商品</button>

        <table class="table table-hover">
            <thead class="active">
                <th>商品编号</th>
                <th>商品名</th>
                <th>价格</th>
                <th>库存</th>
                <th>下架时间</th>
                <th>操作</th>
            </thead>
            <tbody id="list">
                <tr class="template">
                    <td class="proid"></td>
                    <td class="proname"></td>
                    <td class="price"></td>
                    <td class="num"></td>
                    <td class="downtime"></td>
                    <td>
                        <button class="btn btn-primary">编辑</button>
                        <button class="btn btn-danger data-delete">下架</button>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
    <div id="mask"></div>
    <div id="popup">
            <p>
                <label for="proid">商品编号</label>
                <input type="num" id="proid" placeholder="此项不可修改,请输入原值">
            </p>
        <p>
            <label for="proname">商品名</label>
            <input type="text" id="proname">
        </p>
        <p>
            <label for="price">价格</label>
            <input type="number" id="price">
        </p>
        <p>
            <label for="num">上架数量</label>
            <input type="number" id="num">
        </p>
        <p>
            <label for="downtime">下架时间</label>
            <input type="date" id="downtime">
        </p>
        <button id="cancel" class="btn btn-default" style="float:right;">取消</button>
        <button id="confirm" class="btn btn-primary" style="float:right;margin-right:15px;">确认</button>
        <button id="change" class="btn btn-primary" style="float:right;margin-right:30px;">修改</button>
    </div>

    <script src="../src/js/jquery.min.js"></script>
    <script>

        $.ajax({
            url: "http://127.0.0.1:8080/getproduct",
            success(data) {
                data.forEach(item => {
                    let newItem = $(".template").clone(true).attr("class", "");
                    $("#list").append(newItem)
                    // 对接数据
                    newItem.find(".proid").html(item.proid)
                    newItem.find(".proname").html(item.proname)
                    newItem.find(".price").html(item.price)
                    newItem.find(".num").html(item.num)
                    newItem.find(".downtime").html(item.downtime)
                })
            }
        })
        //新增商品单击事件
        $(".btn-primary").click(function () {
            $("#popup").fadeIn();
            $("#mask").fadeIn();
        })

        //新增商品信息
        $("#confirm").click(function () {
            let proname = $("#proname").val();
            let price = $("#price").val();
            let num = $("#num").val();
            let downtime = $("#downtime").val();
            let http = new XMLHttpRequest();
            http.open("get", `http://127.0.0.1:8080/addpro?proname=${proname}&price=${price}&num=${num}&downtime=${downtime}`)
            http.send();
            http.onreadystatechange = function () {
                if (http.readyState === 4) {
                    if (http.responseText == "success") {
                        alert("插入成功")
                        $("#popup").slideUp();
                        $("#mask").slideUp();
                        history.go(0)
                    }
                    else {
                        alert("插入失败")
                    }
                }
            }
        })
        //修改按钮单击事件
        $("#addproduct").click(function () {
            $("#popup").fadeIn();
            $("#mask").fadeIn();
        })
         //编辑商品信息
         $("#change").click(function () {
            let proname = $("#proname").val();
            let price = $("#price").val();
            let num = $("#num").val();
            let proid = $("#proid").val();
            let downtime = $("#downtime").val();
            let http = new XMLHttpRequest();
            console.log(proid)
            http.open("get", `http://127.0.0.1:8080/changepro?proname=${proname}&price=${price}&num=${num}&downtime=${downtime}&proid=${proid}`)
            http.send();
            http.onreadystatechange = function () {
                if (http.readyState === 4) {
                    if (http.responseText == "success") {
                        alert("修改成功")
                        $("#popup").slideUp();
                        $("#mask").slideUp();
                        history.go(0)
                    }
                    else {
                        alert("修改失败")
                    }
                }
            }
        })
        //删除商品信息
        $(".data-delete").click(function () {
            let proid = $(this).closest("tr").find(".proid").html();
            if (confirm("确定下架该商品吗?此操作会清空该商品信息喔!!")) {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/deletepro?proid=${proid}`)
                http.send();
                http.onreadystatechange = function () {
                    if (http.readyState === 4) {
                        if (http.responseText == "success") {
                            alert("删除成功")
                            history.go(0)
                        }
                        else {
                            alert("删除失败")
                        }
                    }
                }
            }
        })


        $("#cancel").click(function () {
            $("#popup").slideUp();
            $("#mask").slideUp();
        })  
    </script>
</body>

</html>